<%--
  User: wang_
  Date: 2025/7/14
  Time: 13:52
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<% response.setHeader("Content-Type", "text/html; charset=UTF-8"); %>
<% request.setCharacterEncoding("UTF-8"); %>
<% response.setCharacterEncoding("UTF-8"); %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--java代码获取系统上下文路径-->
<%String path = request.getContextPath();%>
<%--JSTL获取系统上下文路径：--%>
<c:set var="ctu" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh-CN">
<!-- 主页 -->
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>百科主页</title>
	<link href="${ctu}/css/universal.css" rel="stylesheet">
	<script src="${ctu}/js/util.js"></script>
	<script src="${ctu}/js/jquery-3.7.1.js"></script>
	
	<!-- 图标字体库 -->
	<style>@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');</style>
	
	<!-- jquery-ui库 -->
	<link rel="stylesheet" href="${ctu}/lib/jquery-ui-1.14.1/jquery-ui.css">
	<script src="${ctu}/lib/jquery-ui-1.14.1/jquery-ui.min.js"></script>
	
	<link href="css/homepage.css" rel="stylesheet">
</head>

<body>

<!-- 导航栏 -->
<nav id="navigationBar">
	<div class="nav-container">
		<%-- 引入头部 --%>
		<jsp:include page="../../pubicPage/topPage.jsp"/>
	</div>
</nav>

<!-- 跳转到顶部 -->
<div id="returnToTop">
	<jsp:include page="../../pubicPage/backToTopPage.jsp"/>
</div>

<!-- 标题区域 -->
<header class="hero">
	<div class="hero-container">
		<h1>探索无限可能的<br><span class="text-accent">MOD</span>世界</h1>
		<p>发现数千个精选MOD，提升你的游戏体验，解锁全新玩法，打造专属世界。</p>
		<div class="hero-buttons">
			<a href="#featured" onclick="smoothJump('#featured')">
				<i class="fa fa-star mr-2"></i>浏览精选MOD
			</a>
			<a href="#featured-integration-package" onclick="smoothJump('#featured-integration-package')">
				<i class="fa fa-th-large mr-2"></i>浏览精选整合包
			</a>
		</div>
	</div>
	<div class="arrow">
		<img src="../../img/arrow.svg" alt="向下箭头">
	</div>
</header>

<!-- 精选MOD区域 -->
<section class="featured" id="featured">
	<div class="featured-container">
		<div class="featured-header">
			<h2>精选<span class="text-accent">MOD</span></h2>
			<p>我们精心挑选了这些MOD，为你的游戏增添独特体验和功能</p>
		</div>
		<div class="featured-loading loading">
			<div></div>
			<div>加载中...如果加载时间过长请刷新页面</div>
			<%--精选模组--%>
			<script src="${ctu}/member/wj/js/loadingSelectedMods.js"></script>
		</div>
		<div class="featured-more">
			<a href="#">
				查看更多MOD <i class="fa fa-arrow-right ml-2"></i>
			</a>
		</div>
	</div>
</section>

<!-- 精选整合包区域 -->
<section class="featured-integration-package" id="featured-integration-package">
	<div class="featured-integration-package-container">
		<div class="featured-integration-package-header">
			<h2>精选<span class="text-accent">整合包</span></h2>
			<p>试试别人的世界吧！</p>
		</div>
		<div class="featured-integration-package-loading loading">
			<div></div>
			<div>加载中...如果加载时间过长请刷新页面</div>
			<%--精选模组--%>
			<script src="${ctu}/member/wj/js/loadingSelectedIntegrationPackage.js"></script>
		</div>
		<div class="featured-integration-package-more">
			<a href="#">
				查看更多整合包 <i class="fa fa-arrow-right ml-2"></i>
			</a>
		</div>
	</div>
</section>

<!-- 关于我们 -->
<section class="about" id="about">
	<%-- 引入底部 --%>
	<jsp:include page="../../pubicPage/bottomPage.jsp"/>
</section>

<!-- 主页js -->
<script src="js/homepage.js"></script>

<script>
    $(document).ready(function () {
        $('#menu-toggle').click(function () {
            $('#mobile-menu').slideToggle();
        });
    });
</script>
</body>

</html>

